<template>
	<ul class="ele-submenu">
		<div class="ele-submenu-title" @click="showChild=!showChild">
			<slot name="title"></slot>
			<span class="shrink-icon" :style="{ transform: `rotateZ(${showChild ? 0 : 180}deg)` }">^</span>
		</div>
		<div class="ele-submenu-child-box" v-show="showChild">
			<slot></slot>
		</div>
	</ul>
</template>

<script>
	export default {
		name: "Ele-submenu",
		data() {
			return {
				showChild: false
			}
		}
	}
</script>

<style scoped lang="less">
	.ele-submenu {
		list-style: none;
		background-color: pink;
		padding-left: 0;

		&-title {
			color: #fff;
			position: relative;

			.shrink-icon {
				position: absolute;
				top: 1px;
				right: 10px;
			}
		}

		&-child-box {
			overflow: hidden;
			padding-left: 20px;
		}

		li {
			background-color: pink;
		}
	}
</style>
